<!--
 * @Descripttion: 
 * @version: 
 * @Author: hejin.gao
 * @Date: 2022-09-09 10:42:23
 * @LastEditors: hejin.gao
 * @LastEditTime: 2022-09-21 09:28:21
-->
<template>
  <!-- <div>
    <div class="list">
      <el-button-group>
        <el-tooltip class="item" effect="dark" content="播放" placement="bottom">
          <el-button type="primary" icon="el-icon-video-play" size="mini" @click="play"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="暂停" placement="bottom">
          <el-button type="primary" icon="el-icon-video-pause" size="mini" @click="pause"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="停止" placement="bottom">
          <el-button type="primary" icon="el-icon-remove-outline" size="mini" @click="stop"></el-button>
        </el-tooltip>
      </el-button-group>
    </div>
  </div> -->

  <div class="tool">
    <el-tooltip class="item" effect="dark" content="播放" placement="top">
      <div class="item" @click="play" >
        <i class="el-icon-video-play"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="停止" placement="top">
      <div class="item" @click="pause" >
        <i class="el-icon-remove-outline"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="飞行线路" placement="top">
      <div class="item" @click="line" :class="{ 'active': visible }">
        <i class="el-icon-view"></i>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    this.tour = null;
    return {
      visible: true
    };
  },
  computed: {
    ...mapState("layer", ["objectIds"]),
  },
  mounted() {
    let object = earth.objectsManager.objectList.find(
      (ele) => ele.type == "cameraTour" && this.objectIds.includes(ele.id)
    );
    this.tour = object?.value;
  },
  methods: {
    line() {
      if (!this.tour) { return; }
      this.visible = !this.visible;
      this.tour.show = this.visible;
    },
    play() {
      if (!this.tour) {
        return;
      }
      this.tour.play();
    },
    pause() {
      if (!this.tour) {
        return;
      }
      this.tour.pause();
    },
    stop() {
      if (!this.tour) {
        return;
      }
      this.tour.stop();
    },
  },
};
</script>


<style lang="scss" scoped>
.list {
  padding: 20px 0;
  text-align: center;

  .el-button {
    font-size: 16px;
  }
}
</style>